<template>
  <div>
    <div v-for="(item, index) in book" :key="index" class="box">
      <div class="topbox">
        <div class="leftbox">
          <img :src="require(`../assets/img/book/${item.img}`)" alt="" />
        </div>
        <div class="rightbox">
          <div class="font1">{{ item.bookname }}</div>
          <div class="font2">{{ item.author }}</div>
          <div class="font2 flex">出版社： <div class="font5">{{ item.publisher }}</div></div>
         
          <div class="font2">{{ item.time }}</div>
          <div class="font2">{{ item.reading }}</div>
          <div class="btnbox">
            <div class="btn1">立即阅读</div>
            <div class="btn2">微课视频</div>
          </div>
        </div>
      </div>
      <div class="bottombox">
        <div class="font3">简介 · · · · · ·</div>
        <div class="font4">{{ item.introduction }}</div>
        <div class="font3">编剧推荐 · · · · · ·</div>
        <div class="font4">{{ item.introductiontwo }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      book: [],
      bookid: "",
    };
  },
  created() {
    console.log(this.$route.query.bookid);
    this.bookid = this.$route.query.bookid;
  },
  mounted() {
    axios
      .post("http://localhost:3000/api/user/bookinfo", {
        bookid: this.bookid,
      })
      .then((response) => {
        console.log(response);
        this.book = response.data;
      });
  },
  computed: {},
};
</script>

<style scoped>
@import "../assets/css/bookinfo";
</style>